<template>
  <div class="ba-table">
    <YsTable ref="tables" :class="hasPagination?'tableinner':'table100'" :loading="loading" :no-data-text="loading?'加载中...':'暂无数据'" :columns="columns" highlight-row :span-method="handleSpan" @on-selection-change="selectionChange"
      @on-row-click="rowChange" :data="data"> </YsTable>
    <div v-if="hasPagination" class="table-footer">
      <div class="records text_01">
        共{{ total }}条
      </div>
      <YsPage v-if="hasPage" @on-change="pageChange" :page-size="pageSize" :current="current" @on-page-size-change="pageSizeChange" :total="total" :show-sizer="showSizer" :show-elevator="showElevator" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'proTable',
  props: {
    //数据
    data: {
      type: Array,
      default: () => []
    },
    //表头
    columns: {
      type: Array,
      default: () => []
    },
    //是否显示分页
    hasPagination: {
      type: Boolean,
      default: true
    },
    //加载中
    loading: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: [Number, String],
      default: 0
    },
    current: {
      type: [Number, String],
      default: 1
    },
    //拆分表格
    handleSpan: {
      type: Function,
      default: () => {
      }
    },
    //总数
    total: {
      type: [Number, String],
      default: 0
    },
    //跳转到那一页
    showElevator: {
      type: Boolean,
      default: false
    },
    //选择显示多少条
    showSizer: {
      type: Boolean,
      default: false
    },
    //是否需要分页
    hasPage: {
      type: Boolean,
      default: true
    },

  },
  data() {
    return {


    }
  },
  methods: {
    setTable() {
      let _this = this
      _this.columns.forEach(item => {
        if (!item.render) {
          item.render = function (h, params) {
            if (params.row[params.column['key']] == 0) {
              params.row[params.column['key']] = "0"
            }
            return h('span', params.row[params.column['key']] ? params.row[params.column['key']] : '--')
          }
        }
      })
    },
    //分页
    pageChange(page) {
      this.$emit("clickPage", page)
    },
    //没有显示多少条
    pageSizeChange(pageSize) {
      this.$emit("pageSize", pageSize)
    },
    //选中行内容
    rowChange(data, index) {
      this.$emit("rowData", data)
    },
    //复选框勾选内容
    selectionChange(select) {
      this.$emit("selectionDada", select)
    },
  },
  mounted() {


  }

}
</script>

<style scoped lang='less'>
.ba-table {
  height: 100%;
  .table100 {
    height: 100%;
    border: none;
    box-shadow: none;
  }
  .tableinner {
    border-color: transparent;
    box-shadow: none;
    height: calc(100% - 52px);
  }
  /deep/ .ivu-table-header {
    padding-left: 0;
    thead {
      tr {
        th {
          height: 48px;
        }
      }
    }
  }
  /deep/ .ivu-table-body {
    height: calc(100% - 47px);
    overflow: auto;
  }
  .table-footer {
    display: flex;
    align-items: center;
    padding: 10px 20px;

    .ivu-page {
      margin-left: auto;
    }
  }
}
</style>